<template>
  <div class="pie boxBg">
    <div class="chartImg">
      <div :ref="ref" class="chart" />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  filters: {
    FormatToFixed(val) {
      if (val) {
        let result = (Math.round(val * 100) / 100).toString()
        let dotPosition = result.indexOf('.')
        if (dotPosition < 0) {
          dotPosition = result.length
          result += '.'
        }
        while (result.length <= dotPosition + 2) {
          result += '0'
        }
        return result
      } else {
        return 0
      }
    }
  },
  props: {
    summaryInfo: {
      type: [Array,Object],
      default: () => {
        return []
      }
    },
    type: {
      type: String,
      default: '0'
    },
    colorList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      ref: 'stockPie',
      date: '',
      totalQty: '',
      totalAmount: '',
      myCharts: {},
      myChart2: {},
      percent: '',
      percent1: '',
      percentList: [],
      colorI: 0,
      planInQty: '',
      planOutQty: '',
      index1: '',
      index2: '',
      realInQty: '',
      echartsData: {},
      initQualityInfo: [
        {
          value: 0,
          name: '战略'
        },
        {
          value: 0,
          name: '战役'
        }
      ]
    }
  },
  watch: {
    summaryInfo: {
      handler() {
        this.$nextTick(() => {
            this.init()
          })
      },
      immediate: true
      // deep: true
    },
    type: {
      handler() {
        this.init()
      }
    }
  },
  computed: {
    legend() {
      const legend = this.percentList.map(item => {
        return item
      })
      return legend
    }
  },
  mounted() {
    window.addEventListener('resize', this.chartsResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.chartsResize)
    this.myCharts?.dispose()
  },
  methods: {
    init() {
      // 对dataMap进行处理，使其可以直接在页面上展示
     
      this.$nextTick(() => {
        // 饼图1
        this.myCharts = this.$echarts.init(this.$refs.stockPie)
        this.myCharts.clear()
        this.myCharts.setOption(
          this.summaryInfo,true
        )

        this.myCharts.on('mouseover', e => {
          this.index1 = e.dataIndex
        })

        this.myCharts.on('mouseout', () => {
          this.index1 = '0'
        })
      })
    },
    chartsResize() {
      this.colorI = 0

      this.myCharts.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.pie {
  position: relative;
  text-align: left;
width: 100%;
  .chartImg {
    display: flex;
    align-items: center;
    width: 100%;
    height: 200px;
    background: rgba(86,103,139,0.2);
border: 1px solid #56678B;
border-radius: 2px;
    .chart {
      width: 100%;
      height: 180px;
    }
  }
  .info {
    position: absolute;
    text-align: left;
    top: 6vh;
    left: 50%;
    .legend {
      margin-bottom: 1vh;
      .circle {
        width: 14px;
        height: 1.3vh;
        border-radius: 2px;
        display: inline-block;
        vertical-align: middle;
        &.green {
          background: #24a483;
        }
        &.blue {
          background: #0467ad;
        }

        &.yellow {
          background: #8aab47;
        }

        &.purple {
          background: #6138c3;
        }
      }

      .text {
        color: #fff;
        vertical-align: middle;
        margin-left: 10px;
        font-size: 12px;
      }
    }
    .total {
      color: #fff;
      margin-left: 20px;
      font-size: 12px;
      line-height: 23px;
    }
  }
}
</style>
